<template>
	<view class="detail">
		<view class="detail-top">
			  <view class="detail-top-left">
					<view class="detail-top-no">
						合约编号：{{receipt.debtnum}}
					</view>
					<view class="detail-top-label">合约总额(元)</view>
					<view class="detail-top-num">
						{{receipt.surplus_money}}
					</view>
			  </view>
			  <view class="detial-top-right">
			  		<view class="detail-top-btn">{{receipt.repay_status}}</view>
			  </view>
		</view>
		
		<view class="detail-card">
			<view class="detail-card-top">
					<image src="../../../static/images2/bg-zdt.png" mode="" class="img"></image>
					<view class="detail-card-top__inner">
						<view class="detail-card-top-title">合约详情</view>
						<view class="detail-card-top-no">{{receipt.debtnum}}</view>
					</view>
			</view>
			<view class="detail-card-main">
				<view class="detail-card-line">
					由于<view class="bold">{{receipt.loanpurpose}}</view>，本人通过<view class="bold">{{receipt.zztype}}</view>方式
					向<view class="bold">{{receipt.creditor.username}}</view>(身份证号码:<view class="bold">{{receipt.creditor.idcard}}</view>)借取本金
					人民币<view class="bold">{{num2chinese(receipt.loan_money)}}(￥{{receipt.loan_money}})</view>，
					总利息金额<view class="bold">壹元(1.00)</view>
					即借款年利率<view class="bold">{{receipt.year_rate}}%</view>,自<view class="bold">{{receipt.loan_date}}出借</view>，需在
					<view class="bold">{{receipt.repay_date}}一次性还本付息</view>。
				</view>
				<view class="detail-card-line">
					本借条自「<view class="bold">出借人</view>」向「<view class="bold">借款人</view>」支付借款本金时
					生效。本借条纠纷由出借人所在地、债务人所在地地方人民法院管辖。
				</view>
			</view>
		</view>
		
		<view class="detail-block">
			<view class="detail-block-title">
				借款人信息
			</view>
			<view class="detail-block-main">
				<view class="line-item">
					<view class="line-item-label">姓名</view>
					<view class="line-item-value">{{receipt.obligor.username}}</view>
				</view>
				<view class="line-item">
					<view class="line-item-label">手机号</view>
					<view class="line-item-value">{{receipt.obligor.mobile}}</view>
				</view>
				<view class="line-item">
					<view class="line-item-label">身份证号</view>
					<view class="line-item-value">{{receipt.obligor.idcard}}</view>
				</view>
			</view>
		</view>	 
		
		<view class="detail-block">
			<view class="detail-block-title">
				出借人信息
			</view>
			<view class="detail-block-main">
				<view class="line-item">
					<view class="line-item-label">姓名</view>
					<view class="line-item-value">{{receipt.creditor.username}}</view>
				</view>
				<view class="line-item">
					<view class="line-item-label">手机号</view>
					<view class="line-item-value">{{receipt.creditor.mobile}}</view>
				</view>
				<view class="line-item">
					<view class="line-item-label">身份证号</view>
					<view class="line-item-value"></view>
				</view>
			</view>
		</view>
		
		<view class="detail-block">
				  <view class="detail-block-title">付款信息</view>
				  <view class="detail-block-main">
					  <view class="line-item">
							<view class="line-item-label">近期还款时间</view>
							<view class="line-item-value">{{receipt.repay_date}}</view>
					  </view>
					  <view class="line-item">
							<view class="line-item-label">借款周期</view>
							<view class="line-item-value">{{receipt.loan_date}}到{{receipt.repay_date}}</view>
					  </view>
					  <view class="line-item">
							<view class="line-item-label">还款方式</view>
							<view class="line-item-value">{{receipt.repay_type}}</view>
					  </view>
					  <view class="line-item" v-if="receipt.repay_type!='一次性还款'">
							<view class="line-item-label">付款周期</view>
							<view class="line-item-value">
								每期还款{{ receipt.cycle_money }}元，共{{
											receipt.cycle_num
								}}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view>
							</view>
					  </view>
					  <view class="line-item">
							<view class="line-item-label">年化利率</view>
							<view class="line-item-value">{{receipt.year_rate}}%</view>
					  </view>
				  </view>
		</view>
		
		<view class="detail-block">
				<view class="detail-block-title">其他事项</view>
				<view class="detail-block-main submitter">
					<view  v-if="receipt.remarks">{{receipt.remarks}}</view>
					<view class="remarks" v-else>借款事项备注</view>
				</view>
		</view>
			
		
		<view class="debtDetails">
			<!--
			<view class="top">
				<image src="../../../static/images/loginLogo.png" mode="" class="img"></image>
				<view>
					<view class="username">{{receipt.obligor.username}}</view>
					<view class="mobile">{{receipt.obligor.mobile}}</view>
				</view>
			</view>
			<view class="essential">基本信息</view>
			<view class="item">
				<view>合约总额：{{receipt.surplus_money}}￥</view>
			</view>
			<view class="item">
				<view>状态：{{receipt.repay_status }}</view>
			</view>
			<view class="essential">付款信息</view>
			<view class="item">
				<view>近期还款时间：{{receipt.repay_date}}</view>
			</view>
			<view class="item" v-if="receipt.repay_type=='一次性还款'">
				<view>借款周期：{{receipt.loan_date}}到{{receipt.repay_date}}</view>
			</view>
			<view class="item">
				<view>还款方式：{{receipt.repay_type}}</view>
			</view>
			<view class="item" v-if="receipt.repay_type!='一次性还款'">
				<view>付款周期：每期还款{{ receipt.cycle_money }}元，共{{
	    receipt.cycle_num
	  }}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view>
				</view>
			</view>
			<view class="item">
				<view>年化利率：{{receipt.year_rate}}%</view>
			</view>
			<view class="essential">其它事项</view>
			<view class="submitter">
				<view v-if="receipt.remarks">{{receipt.remarks}}</view>
				<view class="remarks" v-else>借款事项备注</view>
			</view>
-->

			<u-popup v-model="rejectshow.show" mode="center" border-radius="20" width="686rpx" height="392rpx">
				<view class="rebut">
					<view class="tips">提示</view>
					<view class=" identification">是否确认驳回该待确认的合约？</view>
					<view class="repayment_button">
						<view class="cancel public" @click="cancel">取消</view>
						<view class="confirm public" @click="acknowledge">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<view>
			<view class="d-f verifica_bottom">
				<view class="reject" @click="overrule"> 驳回 </view>
				<view class="verification" @click="verification">
					确定
				</view>
			
			</view>
		</view>
		 <jpPwd ref="jpPwds" tite="身份验证" contents="请输入交易密码,以验证身份" :flag="flag"  @completed="completed"  :cancelType="cancelType"></jpPwd>
	</view>


</template>

<script>
	import date from '@/utils/date'
	 import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	 import toast from '../../../utils/toast'
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
           cancelType:false,
		   flag:false,
			}
		},
		components: {
			jpPwd 
		},
		methods: {
			 num2chinese: date.num2chinese,
			...mapActions({
				confirm:'MAY_DEBT/CONFIRM',//确认交易密码	
				getNoteDetails: 'MAY_DEBT/GET_NOTE_DETAILS', //获取合约详情
				rejectMayDebit: 'MAY_DEBT/REJECT_MAY_DEBIT' //驳回合约
			}),
			...mapMutations({
				changeRejectshow: "MAY_DEBT/CHANGE_REJECT_SHOW", //更改驳回弹框状态
			}),
			//输入交易密码验证合约
			verification() {
				this.$refs.jpPwds.toOpen()
				this.flag=false
			},
			//打开驳回弹框
			overrule() {
				this.changeRejectshow(true);
			},
			//驳回合约
			acknowledge() {
				this.rejectMayDebit(this.id)
			},
			cancel(){
			this.changeRejectshow(false);
				},
				//输入交易密码
				completed(e){
					this.confirm({id:this.id,pay_pwd:e}).then(res=>{
						if(res){
						 	toast.successTab('确认合约成功', '/pages/creditor/personam/index')
						}else{
							this.flag=true
							this.$refs.jpPwds.backs()
						}
					})
				},
				inputPwd(){
					this.flag=false	
				}
		},
		mounted() {

		},
		watch: {

		},
		onShow() {
			this.changeRejectshow(false);
		},
		onLoad(options) {
			this.id = options.id
			this.getNoteDetails(options.id)
		},
		computed: {
			...mapState({
				receipt: (state) => state.MAY_DEBT.receipt,
				repay_record: (state) => state.MAY_DEBT.repay_record,
				rejectshow: (state) => state.MAY_DEBT.rejectshow,
			})
		}
	}
</script>

<style scoped lang='scss'>
	@import '@/common/receiptDetails.scss';
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>
